插件通常用來為Vue 添加全局功能。插件的功能範圍沒有嚴格的限制，一般有下面幾種:

1.添加全局方法或者property。

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue);

2.添加全局資源，如:指令/過濾器/過渡等。
當然可以使用自定義的指令/過濾器..，例：自定義v-focus指令

MyPlugin.install = function (Vue, options) {
  //add a global asset
  Vue.directive('focus', {
      inserted: function (el) {
        el.focus()
      }
  })
}

Vue.use(MyPlugin)

new Vue({
  // code...
})

3.通過全局混入來添加一些元件選項，如data、methods、hook。

MyPlugin.install = function (Vue, options) {
  // inject some component options
  Vue.mixin({
    data: function () {
      return {
         message: 'hello',
         foo: 'abc'
      }
    }
    created: function () {
        // some logic...
    },
    methods: {
        // some method...
    }
    // code ...
  })
}

Vue.use(MyPlugin)

new Vue({
  // code...
})

4.添加Vue實例方法，通過把它們添加到Vue.prototype上實現。

MyPlugin.install = function (Vue, options) {
  // add an instance method
  Vue.prototype.$reverseText = function (propertyName) {
    this[propertyName] = this[propertyName]
    .split('')
    .reverse()
    .join('')
  }
}

Vue.use(MyPlugin)

new Vue({
  // code...
})

5.一個提供自己的API library，同時提供上面提到的一個或多個功能。如:vue-router

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const routes = []

export default new Router({
  mode: 'hash', // https://router.vuejs.org/api/#mode
  linkActiveClass: 'open active',
  scrollBehavior: () => ({y: 0}),
  routes
})

通過全局方法 Vue.use() 使用插件。它需要在你調用 new Vue() 啟動應用之前完成

Vue.use(MyPlugin)

new Vue({
  // 元件選項
  el: '#app',
  router,
  template: '<App/>',
  components: {
      App
  }
})

您也可以選擇傳遞一些選項：
Vue.use(MyPlugin, { someOption: true })

若要自行開發插件，可以使用install方法，第一個參數是 Vue 建構式，第二個參數是可選的選項，來進行調用

export default {
    install (Vue, options) {
      // 1. add global method or property
      Vue.myGlobalMethod = function () {
        // some logic ...
      }

      // 2. add a global asset
      Vue.directive('my-directive', {
        bind (el, binding, vnode, oldVnode) {
          // some logic ...
        }
        ...
      })

      // 3. inject some component options
      Vue.mixin({
        created: function () {
          // some logic ...
        }
        ...
      })

      // 4. add an instance method
      Vue.prototype.$myMethod = function (methodOptions) {
        // some logic ...
      }
    }
}

有任何問題歡迎下方留言，如果喜歡我的文章別忘了按讚、訂閱追蹤加分享唷!!
---我是分隔線-----------------------------------------------------------
PollyPO技術-前端設計轉前端工程師-JS踩坑雜記 30 天
喬依司-實作經典 JavaScript 30
五百億-Vue CLI + Firebase 雲端資料庫 30天打造簡易部落格及後臺管理
eien_zheng-前端小嘍嘍的Golang學習旅程_The journey of learning Golang